<template>
  <div class="overview">
    <lt-card title="关于">
      <div class="header">
        Vue3Admin是基于Vue3,vuex,VueRouter,vite,Elementplus,Typescript,Echarts5等后台系统解决方案
      </div>
    </lt-card>
    <lt-card title="技术栈">
      <ul class="main">
        <li>开发工具:<span class="span">Visual Studio Code</span></li>
        <li>编程语言：<span class="span">TypeScript 4.x + javaScript</span></li>
        <li>构建工具：<span class="span">vite 2.x / Webpack 5.x</span></li>
        <li>前端框架：<span class="span">Vue 3.x</span></li>
        <li>路由工具：<span class="span">vue Router 4.x</span></li>
        <li>状态管理：<span class="span">Vuex 4.x</span></li>
        <li>UI框架：<span class="span">Element Plus </span></li>
        <li>可视化：<span class="span">Echarts 5.x</span></li>
        <li>富文本：<span class="span">WangEditor</span></li>
        <li>
          工具库：<span class="span">@vueuse/core + dayls + countup.js</span>
        </li>
        <li>css预编译：<span class="span">Sass / Less</span></li>
        <li>HTTP工具：<span class="span">Axios</span></li>
        <li>Git Hook工具：<span class="span">husky</span></li>
        <li>
          代码规范：<span class="span">EditorConfig + Prettler + ESLint</span>
        </li>
        <li>提交规范：<span class="span">Commitizen + Commitlint</span></li>
        <li>自动部署：<span class="span">Centos + Jenkins + Nginx</span></li>
      </ul>
      <div class="main-table">
        <div class="table-title">生产环境依赖</div>

        <el-row>
          <el-col :span="12">
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column prop="name" miniwidth="200" label="工具">
              </el-table-column>
              <el-table-column prop="edition" miniwidth="500" label="version">
                <template #default="scope">
                  <span class="version">{{ scope.row.edition }}</span>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
          <el-col :span="12">
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column prop="name" miniwidth="200" label="工具">
              </el-table-column>
              <el-table-column prop="edition" miniwidth="500" label="version">
                <template #default="scope">
                  <span class="version">{{ scope.row.edition }}</span>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </div>
      <div class="main-table">
        <div class="table-title">开发环境依赖</div>

        <el-row>
          <el-col :span="12">
            <el-table :data="tableData2" border style="width: 100%">
              <el-table-column prop="name" miniwidth="200" label="工具">
              </el-table-column>
              <el-table-column prop="edition" miniwidth="500" label="version">
                <template #default="scope">
                  <span class="version">{{ scope.row.edition }}</span>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
          <el-col :span="12">
            <el-table :data="tableData3" border style="width: 100%">
              <el-table-column prop="name" miniwidth="200" label="工具">
              </el-table-column>
              <el-table-column prop="edition" miniwidth="500" label="version">
                <template #default="scope">
                  <span class="version">{{ scope.row.edition }}</span>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </div>
    </lt-card>
    <lt-card title="项目结构">
      <div class="pre">
        <pre>{{ ll }}</pre>
      </div>
    </lt-card>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import ltCard from '../../../../components/card/index'
import { ll } from './file'
export default defineComponent({
  name: 'overview',
  components: {
    ltCard
  },
  setup() {
    const tableData = [
      {
        name: 'vue',
        edition: '^3.0.5'
      },
      {
        name: 'vuex',
        edition: '^4.0.0'
      },
      {
        name: 'element plus',
        edition: '^1.0.2-beta.41'
      },
      {
        name: 'less',
        edition: '^4.1.1'
      },
      {
        name: 'Echart',
        edition: '^5.1.1'
      },
      {
        name: 'countup.js',
        edition: '^2.0.7'
      },
      {
        name: 'plnla',
        edition: '^2.0.0-alpha.13'
      }
    ]
    const tableData1 = [
      {
        name: 'vue-router',
        edition: '^4.0.6'
      },
      {
        name: 'axios',
        edition: '^0.21.1'
      },
      {
        name: 'mockjs',
        edition: '^1.1.0'
      },
      {
        name: 'scss',
        edition: '^0.2.4'
      },
      {
        name: '@/vueuse/core',
        edition: '^4.9.1'
      },
      {
        name: 'dayjs',
        edition: '^1.10.4'
      },
      {
        name: 'wangeditor',
        edition: '^4.6.17'
      }
    ]
    const tableData2 = [
      {
        name: 'Typescript',
        edition: '^4.1.3'
      },
      {
        name: 'vite',
        edition: '^2.2.3'
      },
      {
        name: 'prettier',
        edition: '^2.2.1'
      },
      {
        name: 'husky',
        edition: '^6.0.0'
      },
      {
        name: 'rimraf',
        edition: '^3.0.2'
      },
      {
        name: 'commitlint/config-conventlonal',
        edition: '^12.1.1'
      },
      {
        name: 'typescript-eslint/eslint-plugin',
        edition: '^4.22.0'
      },
      {
        name: 'vitejs/plugin-vue',
        edition: '^1.2.2'
      },
      {
        name: 'commitizen',
        edition: '^4.2.3'
      },
      {
        name: 'eslint-config-airbnb-base',
        edition: '^14.2.1'
      },
      {
        name: 'eslint-plugin-import',
        edition: '^2.22.1'
      },
      {
        name: 'stylelint-config-standard',
        edition: '^22.0.0'
      },
      {
        name: 'vite-plugin-mock',
        edition: '^2.5.0'
      },
      {
        name: 'eslint-config-vue',
        edition: '^7.9.0'
      }
    ]
    const tableData3 = [
      {
        name: 'webpack',
        edition: '^5'
      },
      {
        name: 'eslint',
        edition: '^7.25.0'
      },
      {
        name: 'stylelint',
        edition: '^13.13.0'
      },
      {
        name: 'lint-staged',
        edition: '^10.5.4'
      },
      {
        name: '@commitlint/cli',
        edition: '^12.1.1'
      },
      {
        name: '@types/node',
        edition: '^14.14.41'
      },
      {
        name: '@typescript-eslint/parser',
        edition: '^4.22.0'
      },
      {
        name: '@vue/compiler-sfc',
        edition: '^3.0.5'
      },
      {
        name: 'cz-conventional-changelog',
        edition: '^3.3.0'
      },
      {
        name: 'eslint-config-prettier',
        edition: '^8.3.0'
      },
      {
        name: 'eslint-plugin-prettier',
        edition: '^3.4.0'
      },
      {
        name: 'stylelint-config-prettier',
        edition: '^8.0.2'
      },
      {
        name: 'stylelint-order',
        edition: '^4.1.0'
      },
      {
        name: 'vue-tsc',
        edition: '^0.0.8'
      }
    ]
    return {
      tableData,
      tableData1,
      tableData2,
      tableData3,
      ll
    }
  }
})
</script>

<style scoped>
.header {
  font-size: 15px;
  font-weight: 400;
}
.main {
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 1px;
}
.main-table {
  padding: 10px;
}
.table-title {
  padding: 10px;
  height: 20px;
  line-height: 20px;
}
.main li {
  margin: 5px 0 5px 0;
}
.span {
  font-size: 12px;
  color: rgb(11, 202, 202);
  padding-left: 15px;
}
.version {
  background-color: rgb(184, 255, 255, 0.4);
  width: auto;
  letter-spacing: 1px;
  height: 30px;
  line-height: 30px;
  border-radius: 10px;
  display: inline-block;
  border: 1px solid rgb(197, 192, 192);
}
.pre {
  background-color: rgb(192, 168, 139);
  padding: 10px;
}
</style>
